<template>
  <div>
    <div style="display: flex">
      <el-form
        ref="inquirForm"
        :model="inquirForm"
        class="demo-form-inline"
        :inline="true"
      >
        <el-row class="TimeAndcourses">
          <el-col :span="9" class="TimeZone">
            <el-row style="display: flex; align-items: center">
              <el-col :span="11" class="Time">
                <el-date-picker
                  type="date"
                  placeholder="选择开始日期"
                  v-model="inquirForm.startTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="0.5">-</el-col>
              <el-col :span="11" class="Time">
                <el-date-picker
                  type="date"
                  placeholder="选择结束日期"
                  v-model="inquirForm.endTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-row>
          </el-col>
          <el-col :offset="1" :span="9" class="SelectClass">
            <el-row>
              <el-col :span="8">
                <el-input
                  disabled
                  v-model="college"
                  placeholder=""
                  style="width: 100px"
                ></el-input>
              </el-col>
              <el-col :span="10">
                <el-select
                  v-model="inquirForm.classes"
                  placeholder="请选择班级"
                >
                  <el-option
                    v-for="(item, i) in coursesList"
                    :key="i"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="" style="display: flex; flex-direction: row">
              <el-button
                type="primary"
                @click="handleInquire"
                style="float: left; margin-right: 10px"
                >查询</el-button
              >
              <el-button
                type="info"
                @click="handleReset"
                style="float: left; margin-right: 10px"
                >重置</el-button
              >
              <el-button
                type="primary"
                @click="handleAddition"
                style="float: left"
                >新增</el-button
              >
              <el-upload
                class="upload-demo"
                action="/api/schedule/upload"
                :on-change="handleChangeImport"
                :before-remove="beforeRemove"
                :headers="{ Authorization: header }"
                :on-success="uploadSuccess"
                :multiple="false"
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
                ref="upload"
                style="float: left; margin-left: 10px"
              >
                <el-button type="primary">导入Excel</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--<button type="info" round disabled>{{ time }}</button>-->
    <el-table
      style="width: 100%"
      @sort-change="handleSortChange"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :data="tableData.slice((current - 1) * size, current * size)"
      :default-sort="{ prop: 'date', order: 'desc' }"
      class="pctable"
    >
      <el-table-column sortable="custom" prop="date" label="时间"> </el-table-column>
      <el-table-column prop="classroom" label="教室"> </el-table-column>
       <el-table-column prop="college" label="学院"> </el-table-column>
      <el-table-column prop="classes" label="班级"> </el-table-column>
      <el-table-column prop="shouldArrival" label="应到人数" width="70px">
      </el-table-column>
       <el-table-column prop="peopleLeave" label="请假人数" width="70px">
      </el-table-column>
      <el-table-column prop="arrival" label="实到人数" width="70px">
      </el-table-column>
      <el-table-column
        prop="arrivalRate"
        label="出勤率"
        sortable="custom"
        width="120px"
      ></el-table-column>
      <el-table-column prop="foodBringPerson" label="带食物人数" width="70px">
      </el-table-column>
      <el-table-column
        prop="foodBringRate"
        label="带食物率"
        width="80px"
      ></el-table-column>
<el-table-column prop="isStand" label="是否站立上课" width="80px">
  <template slot-scope="scope">
    <span v-if="scope.row && scope.row.isStand == 1">是</span>
    <span v-else>否</span>
  </template>
</el-table-column>        <el-table-column prop="isStand" label="是否站立上课" width="80px">
        <template slot-scope="scope">
          <span v-if="scope.row && scope.row.isStand == 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="counsellor" label="辅导员" width="80px">
      </el-table-column>
      <el-table-column prop="teacher" label="任课教师" width="80px">
      </el-table-column>
      <el-table-column prop="checkPerson" label="巡查人" width="80px">
      </el-table-column>
      <!-- <el-table-column prop="remark" label="详情" width="80px"/> -->
      <el-table-column label="操作" width="280px">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDetails(scope.$index, scope.row)"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-popconfirm
            @confirm="handleDelete(scope.$index, scope.row)"
            title="这是一段内容确定删除吗？"
          >
            <el-button slot="reference" size="mini" type="danger"
              >删除</el-button
            >
            <!--  @click="handleDelete(scope.$index, scope.row)" -->
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      style="width: 100%"
      @sort-change="handleSortChange"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :data="tableData.slice((current - 1) * size, current * size)"
      :default-sort="{ prop: 'date', order: 'desc' }"
      class="mobtable"
    >
      <el-table-column sortable="custom" prop="date" label="时间"> </el-table-column>
      <el-table-column prop="classroom" label="教室"> </el-table-column>
      <el-table-column prop="classes" label="班级"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDetails(scope.$index, scope.row)"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-popconfirm
            @confirm="handleDelete(scope.$index, scope.row)"
            title="这是一段内容确定删除吗？"
          >
            <el-button slot="reference" size="mini" type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--  -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 50, 100]"
      :current-page.sync="current"
      :page-size="size"
      layout="sizes, prev, pager, slot"
      :total="tableData.length"
      row-key
      :class="
        tableData.slice((current - 1) * size, current * size).length >= 6
          ? ''
          : 'pagination'
      "
    >
      <el-button
        type="text"
        @click="showMore"
        v-show="tableData.length / size > 1"
        >下一页</el-button
      >
    </el-pagination>

    <!--  -->
    <el-dialog
      :title="messageBoxTitle"
      :visible.sync="messageBox"
      width="75%"
      :before-close="handleClose"
      top="0px"
      custom-class="no-scroll-dialog"
    >
      <el-form
        ref="submitForm"
        :rules="rules"
        :inline="true"
        :model="submitForm"
      >
        <el-form-item label="日期" prop="date">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="submitForm.date"
              style="width: 340px"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="周次" prop="weeks">
          <el-select
            v-model="submitForm.weeks"
            placeholder="请选择周次"
            style="width: 250px"
          >
            <el-option
              v-for="i in 19"
              :key="i"
              :label="`第${i}周`"
              :value="`第${i}周`"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="节次" prop="section">
          <el-select
            v-model="submitForm.section"
            placeholder="请选择节次"
            style="width: 250px"
          >
            <el-option
              v-for="i in 8"
              :key="i"
              :label="`第${i}节`"
              :value="`第${i}节`"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="classes">
          <el-select
            label="学院"
            prop="college"
            v-model="submitForm.college"
            placeholder="请选择学院"
            style="width: 250px"
             @change="onCollegeChange"
          >
            <el-option
              v-for="(item, i) in collegeList"
              :key="i"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            v-model="submitForm.classes"
            placeholder="请选择班级"
            @change="selectClass"
            style="width: 250px"
          >
            <el-option
              v-for="(item, i) in coursesList"
              :key="i"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="辅导员" prop="counsellor">
          <el-select
            v-model="submitForm.counsellor"
            placeholder="请输入辅导员"
            style="width: 250px"
            disabled
          >
            <el-option
              v-for="(item, i) in instructorList"
              :key="i"
              :label="item"
              :value="item"
            ></el-option
          ></el-select>
        </el-form-item>
        <br />
        <el-form-item label="教室" prop="classroom">
          <el-select
            v-model="submitForm.classroom"
            placeholder="请输入教室"
            style="width: 250px"
          >
            <el-option
              v-for="(item, i) in classroomList"
              :key="i"
              :label="item"
              :value="item"
            ></el-option
          ></el-select>
        </el-form-item>
        <el-form-item label="任课教师" prop="teacher">
          <el-select
            v-model="submitForm.teacher"
            placeholder="请输入任课教师"
            style="width: 220px"
            filterable
            allow-create
            default-first-option
            clearable
            @change="onTeacherChange"
          >
            <el-option
              v-for="(item, i) in teacherList"
              :key="i"
              :label="item"
              :value="item"
            ></el-option
          ></el-select>
        </el-form-item>
        <h3>学生课堂行为（如果异常需登记详情）</h3>
        <el-form-item label="应到人数">
          <el-input
            v-model="submitForm.shouldArrival"
            placeholder="请输入应到人数"
            style="width: 250px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="实到人数" prop="arrival">
          <el-input
            v-model="submitForm.arrival"
            placeholder="请输入实到人数"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="出勤率">
          <el-input
            v-model="submitForm.arrivalRate"
            placeholder="请输入出勤率"
            style="width: 250px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="课堂纪律" prop="discipline">
          <el-input
            v-model="submitForm.discipline"
            placeholder="请输入课堂纪律"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="带食物进教室人数" prop="foodBringPerson">
          <el-input
            v-model="submitForm.foodBringPerson"
            placeholder="请输入带食物进教室人数"
            style="width: 195px"
          ></el-input>
        </el-form-item>
        <el-form-item label="带食物率">
          <el-input
            v-model="submitForm.foodBringRate"
            placeholder="请输入带食物率"
            style="width: 235px"
            disabled
          ></el-input>
        </el-form-item>
        <h3>教师教学行为（如果异常需登记详情）</h3>
        <el-form-item label="是否迟到早退" prop="isLate">
          <el-radio-group v-model="submitForm.isLate" style="width: 180px">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否违反“八不准”" prop="isViolate">
          <el-radio-group v-model="submitForm.isViolate" style="width: 180px">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否正常组织上课" prop="isNormal">
          <el-radio-group v-model="submitForm.isNormal" style="width: 180px">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否站立上课" prop="isStand">
          <el-radio-group v-model="submitForm.isStand" style="width: 180px">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否与课标对上" prop="isConsist">
          <el-radio-group v-model="submitForm.isConsist" style="width: 180px">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <br />
        <el-form-item label="备注" style="width: 480px">
          <el-input
            placeholder="有异常详情请备注"
            type="text"
            style="width: 200px; margin: 0px 100px 0px 60px"
            v-model="submitForm.remark"
          ></el-input
        ></el-form-item>
        <br />
        <el-form-item label="巡查人" prop="checkPerson">
          <el-input
            v-model="submitForm.checkPerson"
            placeholder="请输入巡查人"
            style="width: 250px"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancellation('submitForm')">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('submitForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!--  -->
    <el-dialog
      title="详情"
      :visible.sync="DetailsBox"
      class="detaiDialog"
      :before-close="handleDetailsClose"
      top="15px"
    >
      <div class="detai">
        <div class="detailList">日期：{{ DetailsList.date }}</div>
        <div class="detailList">周次： {{ DetailsList.weeks }}</div>
        <div class="detailList">节次： {{ DetailsList.section }}</div>
        <div class="detailList">教室： {{ DetailsList.classroom }}</div>
        <div class="detailList">
          班级： {{ college }}- {{ DetailsList.classes }}
        </div>
        <h3>学生课堂行为（如果异常需登记详情）</h3>
        <div class="detailList">应到人数： {{ DetailsList.shouldArrival }}</div>
        <div class="detailList">
          实到人数：
          {{ DetailsList.arrival }}
        </div>
        <div class="detailList">出勤率： {{ DetailsList.arrivalRate }}</div>
        <div class="detailList">课堂纪律： {{ DetailsList.discipline }}</div>
        <div class="detailList">
          带食物进教室人数： {{ DetailsList.foodBringPerson }}
        </div>
        <div class="detailList">带食物率： {{ DetailsList.foodBringRate }}</div>
        <h3>教师教学行为（如果异常需登记详情）</h3>
        <div class="detailList">
          是否迟到早退：
          <el-radio-group v-model="DetailsList.isLate">
            <el-radio disabled :label="1">是</el-radio>
            <el-radio disabled :label="0">否</el-radio>
          </el-radio-group>
        </div>
        <div class="detailList">
          是否违反“八不准”：
          <el-radio-group v-model="DetailsList.isViolate">
            <el-radio disabled :label="1">是</el-radio>
            <el-radio disabled :label="0">否</el-radio>
          </el-radio-group>
        </div>
        <div class="detailList">
          是否正常组织上课：
          <el-radio-group v-model="DetailsList.isNormal">
            <el-radio disabled :label="1">是</el-radio>
            <el-radio disabled :label="0">否</el-radio>
          </el-radio-group>
        </div>
        <div class="detailList">
          是否站立上课：
          <el-radio-group v-model="DetailsList.isStand">
            <el-radio disabled :label="1">是</el-radio>
            <el-radio disabled :label="0">否</el-radio>
          </el-radio-group>
        </div>
        <div class="detailList">
          是否与课标对上：
          <el-radio-group v-model="DetailsList.isConsist">
            <el-radio disabled :label="1">是</el-radio>
            <el-radio disabled :label="0">否</el-radio>
          </el-radio-group>
        </div>
        <div>备注：{{ DetailsList.remark }}</div>
        <div class="detailList">辅导员： {{ DetailsList.counsellor }}</div>
        <div class="detailList">任课教师： {{ DetailsList.teacher }}</div>
        <div class="detailList">巡查人： {{ DetailsList.checkPerson }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="DetailsBox = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      inquirForm: {
        startTime: new Date(),
        endTime: new Date(),
        classes: "",
      },
      submitForm: {
        date: "",
        weeks: "",
        section: "",
        classroom: "",
        classes: "",
        arrival: "",
        shouldArrival: "",
        arrivalRate: "0",
        discipline: "正常",
        foodBringPerson: "",
        foodBringRate: "0",
        isLate: 0,
        isNormal: 1,
        isViolate: 0,
        isConsist: 1,
        isStand: 1,
        counsellor: "",
        teacher: "",
        college: "",
        checkPerson: "",
        remark: "",
      },
      classroomList: [],
      coursesList: [],
      instructorList: [],
      DetailsList: [],
      teacherList: [],
      collegeList:[],
      tableData: [],
      fileList: [],
      messageBox: false,
      DetailsBox: false,
      yesLateshow: false,
      yesViolateshow: false,
      noNormalshow: false,
      header: Cookies.get("token"),
      messageBoxTitle: "新增", 
      id: "",
      size: 10,
      current: 1,
      count: 0,
      lastSortProp: null,
      lastSortOrder: null,
      lastTimeOrder: null,
      lastArrivalOrder: null,
      rules: {
        date: [{ required: true, message: "请选择日期", trigger: "blur" }],
        weeks: [{ required: true, message: "请选择周次", trigger: "blur" }],
        section: [{ required: true, message: "请选择节次", trigger: "blur" }],
        classroom: [{ required: true, message: "请选择教室", trigger: "blur" }],
        classes: [{ required: true, message: "请选择班级", trigger: "blur" }],
        arrival: [
          { required: true, message: "请输入实到人数", trigger: "blur" },
        ],
        discipline: [
          { required: true, message: "请输入课堂纪律情况", trigger: "blur" },
        ],
        foodBringPerson: [
          {
            required: true,
            message: "请输入带食物进教室人数",
            trigger: "blur",
          },
        ],
        isLate: [
          {
            required: true,
            message: "请选择教师是否迟到早退",
            trigger: "blur",
          },
        ],
        isNormal: [
          {
            required: true,
            message: "请选择教师是否正常组织上课",
            trigger: "blur",
          },
        ],
        isViolate: [
          {
            required: true,
            message: "请选择教师是否违反“八不准”",
            trigger: "blur",
          },
        ],
        teacher: [
          { required: true, message: "请选择授课教师", trigger: "blur" },
        ],
        checkPerson: [
          { required: true, message: "请输入巡查人", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.changeCourses();
    this.handleTableData();
    try {
      const savedTimeOrder = localStorage.getItem('lastTimeOrder')
      if (savedTimeOrder) this.lastTimeOrder = savedTimeOrder
    } catch (e) {}
  },
  methods: {
    uploadSuccess(response, file, fileList) {},
    handleChangeImport(file, fileList) {
      let reg = /.*(xls|xlsx)$/;
      if (!reg.test(file.name)) {
        this.$message.error("请上传xls或xlsx格式的文件");
        return false;
      } else {
        this.$refs.upload.uploadFiles = [];
        this.$refs.upload.uploadFiles.push(file);
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}?`);
    },
    async changeCourses() {
      await this.$get("/api/course/classes/list").then((res) => {
        this.coursesList = res.data.slice(1);
      });
    },
    async changeClassroom() {
      await this.$get("/api/course/classroom/list").then((res) => {
        this.classroomList = res.data;
      });
    },
    async changeInstructor() {
      await this.$get("/api/course/counsellor/list").then((res) => {
        this.instructorList = res.data;
      });
    },
    async changeTeacher() {
      await this.$get("/api/course/teacher/list").then((res) => {
        this.teacherList = res.data;
      });
    },
    async changeCollege() {
      await this.$get("/api/course/getCollege").then((res) => {
        this.collegeList = res.data;
      });
    },
    onCollegeChange(val) {
      this.submitForm.classes = "";
      this.$get("/api/course/getClass", { college: val || null }).then((res) => {
        this.coursesList = Array.isArray(res.data) ? res.data : [];
      });
    },
    onTeacherChange(val) {
      if (val && Array.isArray(this.teacherList) && !this.teacherList.includes(val)) {
        this.teacherList.push(val);
      }
    },

    async handleTableData() {
      await this.$post("/api/schedule/list").then((res) => {
        this.tableData = Array.isArray(res.data) ? res.data : [];
      });
    },
    handleFilterate() {
      var arr = [];
      this.tableData.forEach((item) => {
        if (
          new Date(item.date).toLocaleDateString() ==
          new Date().toLocaleDateString()
        ) {
          arr.push(item);
        }
      });
      this.tableData = arr;
    },
    async handleInquire() {
      let starttime;
      let endtime;
      if (this.inquirForm.startTime != null) {
        starttime = this.inquirForm.startTime.toLocaleDateString();
      }
      if (this.inquirForm.endTime != null) {
        endtime = this.inquirForm.endTime.toLocaleDateString();
      }
      await this.$get("/api/schedule/dataStatistics/classes", {
        startTime: starttime || null,
        endTime: endtime || null,
        classes: this.inquirForm.classes || null,
      }).then((res) => {
        this.tableData = res.data;
      });
    },
    handleSortChange({ prop, order }) {
      if (!order) {
        this.lastSortProp = null;
        this.lastSortOrder = null;
        this.handleTableData();
        return;
      }  
      if (prop === "date") {
        this.lastSortProp = "date";
        this.lastSortOrder = order;
        this.lastTimeOrder = order;
        try { localStorage.setItem('lastTimeOrder', order) } catch (e) {}
        this.$get("/api/schedule/timeSorting", { order }).then((res) => {
          this.tableData = Array.isArray(res.data) ? res.data : [];
        });
        return;
      }
      if (prop === "arrivalRate") {
        this.lastSortProp = "arrivalRate";
        this.lastSortOrder = order;
        this.lastArrivalOrder = order;
        const dateOrder = this.lastTimeOrder || (function(){try{return localStorage.getItem('lastTimeOrder')||null}catch(e){return null}})() || 'descending';
        this.$get("/api/schedule/commuteSorting", {
          arrivalRate: order,
          date: dateOrder
        }).then((res) => {
          this.tableData = Array.isArray(res.data) ? res.data : [];
        });
      }
    },
    handleReset() {
      this.inquirForm = {
        startTime: new Date(),
        endTime: new Date(),
        classes: "",
      };
      this.handleTableData();
    },
    handleAddition(index, row) {
      this.messageBox = true;
      this.messageBoxTitle = "新增";
      this.changeInstructor();
      this.changeTeacher();
      this.changeClassroom();
      this.changeCollege();
      this.submitForm = {
        college: "软件学院",
        classes: "",
        arrival: "",
        shouldArrival: "",
        arrivalRate: "0",
        foodBringPerson: "",
        discipline: "正常",
        foodBringRate: "0",
        isLate: 0,
        isNormal: 1,
        isViolate: 0,
        isConsist: 1,
        isStand: 1,
        counsellor: "",
        date: new Date(),
      };
    },
    handleImport() {},
    async handleConfirm(formName) {
      this.handleInquire();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.messageBox = false;
          this.$post("/api/schedule", this.submitForm).then((res) => {
            if(res.code == 200){
                this.$message({
                  message: "录入成功",
                  type: "success",
               });
            } else {
              this.$message({
                  message: "录入失败",
               });
            }
          });
        } else {
          return false;
        }
      });
    },
    handleDetails(index, row) {
      this.DetailsBox = true;
      this.DetailsList = row;
      if (this.DetailsList.remark == null) {
        this.DetailsList.remark = "无异常";
      }
    },
    handleEdit(index, row) {
      this.messageBox = true;
      this.messageBoxTitle = "修改";
      this.changeInstructor();
      this.changeTeacher();
      this.changeClassroom();
      this.changeCollege();
      this.submitForm = row;
    },
    handleDelete(index, row) {
      // console.log(row.id);
      this.$post(`/api/schedule/${row.id}`).then((res) => {
        // console.log(res);
        // location.reload();
        this.handleInquire();
      });
    },
    handleClose() {
      this.messageBox = false;
    },
    handleCancellation(formName) {
      if (this.messageBoxTitle == "新增") {
        this.$refs[formName].resetFields();
      }
      this.messageBox = false;
    },
    handleDetailsClose() {
      this.DetailsBox = false;
    },

    handleChange(value) {},
    // 请选择班级
    selectClass(value) {
      // console.log(value);
      this.$post("/api/course/list", {
        week: null,
        classes: value || null,
      }).then((res) => {
        this.submitForm.counsellor = res.data[0].counsellor;
        this.submitForm.shouldArrival = res.data[0].shouldArrival;
        this.submitForm.arrival = res.data[0].shouldArrival;
        this.submitForm.foodBringPerson = 0;
      });
    },
    // 分页
    handleSizeChange(val) {
      this.size = val;
    },
    handleCurrentChange(val) {
      this.current = val;
    },
    showMore() {
      if (this.current < this.tableData.length / this.size) {
        this.current++;
      } else {
        this.$message({
          message: "已经是最后一页",
          type: "warning",
        });
      }
    },
  },
  watch: {
    "submitForm.arrival"(newVal, oldVal) {
      console.log(newVal);
      if (this.submitForm.shouldArrival > 0) {
        if (this.submitForm.arrival > this.submitForm.shouldArrival) {
          this.submitForm.arrival = this.submitForm.shouldArrival;
        }
        this.submitForm.arrivalRate =
          Number(
            (this.submitForm.arrival / this.submitForm.shouldArrival) * 100
          ).toFixed(2) + "%";
      }
    },
    "submitForm.foodBringPerson"(newVal, oldVal) {
      console.log(newVal);
      if (this.submitForm.shouldArrival > 0) {
        if (this.submitForm.foodBringPerson > this.submitForm.shouldArrival) {
          this.submitForm.foodBringPerson = this.submitForm.shouldArrival;
        }
        this.submitForm.foodBringRate =
          Number(
            (this.submitForm.foodBringPerson / this.submitForm.shouldArrival) *
              100
          ).toFixed(2) + "%";
      }
    },
    "submitForm.isLate"(newVal, oldVal) {
      if (newVal == 1) {
        this.yesLateshow = true;
      } else {
        this.yesLateshow = false;
      }
    },
    "submitForm.isViolate"(newVal, oldVal) {
      if (newVal == 1) {
        this.yesViolateshow = true;
      } else {
        this.yesViolateshow = false;
      }
    },
    "submitForm.isNormal"(newVal, oldVal) {
      if (newVal == 0) {
        this.noNormalshow = true;
      } else {
        this.noNormalshow = false;
      }
    },
    "submitForm.date"(newVal, oldVal) {
      let t;
      // console.log(new Date(Date.parse(this.submitForm.date.replace(/-/g,"/"))));
      if (typeof this.submitForm.date == "string") {
        t = new Date(Date.parse(this.submitForm.date.replace(/-/g, "/")));
      } else {
        t = this.submitForm.date;
      }
      if (t.getHours() == 0) {
        this.submitForm.date = new Date(
          t.setTime(t.getTime() + 3600 * 1000 * 8)
        );
      }
    },
  },
};
</script>

<style scoped>
.detailList {
  margin: 5px;
  font-size: 15px;
}
/deep/ .el-dialog {
  margin-bottom: 0;
}
.pagination {
  position: absolute;
  bottom: 10px;
}
.demo-form-inline {
  display: flex;
  flex-direction: row;
}
.el-input--suffix[data-v-3bc76f6c] >>> .el-input__inner {
  padding-right: 0;
  margin-right: 18px;
}
.TimeAndcourses {
  width: auto;
}
.tabledisplay {
  display: block !important;
}
.pctable {
  display: block !important;
}
.mobtable {
  display: none !important;
}
.el-button + .el-button {
  margin-left: 0px !important;
}
@media (max-width: 728px) {
  .demo-form-inline {
    display: flex;
    flex-direction: column;
  }
  .tabledisplay {
    display: none !important;
  }
  .TimeZone {
    width: 100%;
    margin-bottom: 10px;
  }
  .SelectClass {
    width: 100%;
    margin-left: 0;
    margin-bottom: 10px;
  }
  .Time {
    width: 33%;
  }
  .TimeAndcourses {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .pctable {
    display: none !important;
  }
  .mobtable {
    display: block !important;
  }
  .el-dialog__wrapper >>> .el-dialog {
    width: 100% !important;
  }
}
</style>
